<template>
	<page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
	<view>
		<view class="top" :style="`padding-top: ${$Height() - 30}px;`">
			<view class="top_box">
				<image class="top_box_left" src="/static/30.png" mode="" @click="$fh"></image>
				<view class="top_box_title">全部订单</view>
				<view class="top_box_right" :style="`width: ${$Width() + 15}px;`"></view>
			</view>
			<view class="nav">
				<view class="nav_nr" :class="nav_id == 10 ? 'nav_nr_xz' : ''" @click="nav_click(10)">全部订单</view>
				<view class="nav_nr" :class="nav_id == 5 ? 'nav_nr_xz' : ''" @click="nav_click(5)">待支付</view>
				<view class="nav_nr" :class="nav_id == 1 ? 'nav_nr_xz' : ''" @click="nav_click(1)">进行中</view>
				<view class="nav_nr" :class="nav_id == 3 ? 'nav_nr_xz' : ''" @click="nav_click(3)">已完成</view>
			</view>
		</view>
		<view class="con">
			<view class="list" v-for="(item, index) in list" :key="index" @click="to_order_detail(item.id)">
				<view class="list_top">
					<image class="list_top_img" :src="item.photo" mode=""></image>
					<view class="list_top_box">
						<view class="list_top_box_title">
							<view class="list_top_box_title_text">{{ item.title }}</view>
							<view
								class="list_top_box_title_box"
								v-if="item.status == 3 || item.status == 4 || item.status == 6 || item.status == 5"
								@click.stop="del(index, item.id)">
								<image class="list_top_box_title_box_img" src="/static/66.png" mode=""></image>
								删除
							</view>
						</view>
						<view class="list_top_box_text">{{ item.quyu }}</view>
						<view class="list_top_box_text">
							{{ cityStore.dayDate(item.ktime).month_day }}至{{ cityStore.dayDate(item.jtime).month_day }} ·
							{{ item.jiwan }}
							晚·
							{{ item.czleixing }}
						</view>
					</view>
				</view>
				<view class="list_box">
					<view class="list_box_left list_box_left_1" v-if="item.status == 5">
						<view class="list_box_left_text">待支付</view>
						<view class="list_box_left_num" style="margin-left: 15rpx">
							{{ formatCountdown(item.beizhu) }}
						</view>
					</view>
					<view class="list_box_left list_box_left_1" v-if="item.status == 0">
						<view class="list_box_left_text">房东确认中</view>
					</view>
					<view class="list_box_left list_box_left_1" v-if="item.status == 1">
						<view class="list_box_left_text">待入住</view>
					</view>
					<view class="list_box_left list_box_left_1" v-if="item.status == 2">
						<view class="list_box_left_text">已入住</view>
					</view>
					<view class="list_box_left list_box_left_2" v-if="item.status == 3 || item.status == 6">
						<view class="list_box_left_text">已完成</view>
					</view>
					<view class="list_box_left list_box_left_3" v-if="item.status == 4">
						<view class="list_box_left_text">已取消</view>
					</view>

					<view class="list_box_right">
						<span class="list_box_right_text">支付金额</span>
						<span class="list_box_right_num">¥{{ item.price }}</span>
					</view>
				</view>
				<view class="list_text" v-if="item.status == 0">
					{{ formatCountdown_2(item.beizhu) }}
				</view>
				<view class="list_text" v-if="item.status == 1">请于{{ item.ktime }}14:00-24:00入住</view>
				<view class="list_text" v-if="item.status == 2">请于{{ item.jtime }}12:00之前需退房</view>
				<view class="list_btn">
					<view class="list_btn_left" @click.stop="$callPhone(item.fdphone)">
						<image class="list_btn_left_Img" src="/static/67.png" mode=""></image>
						联系房东
					</view>
					<view class="list_btn_right" v-if="item.status == 5" @click.stop="pay(item.id, index)">去支付</view>
					<view
						class="list_btn_right"
						v-if="item.status == 0 || item.status == 1"
						@click.stop="open(1, index, item.id, item.ktime)">
						取消订单
					</view>
					<view class="list_btn_right" v-if="item.status == 2" @click.stop="open(2, index, item.id)">我要退房</view>
					<view class="list_btn_right list_btn_right_x" v-if="item.status == 3" @click.stop="to_appraise(item.id)">
						去评价
					</view>
				</view>
			</view>
			<view class="con" v-if="list != null && list.length < 1">
				<view class="no_list">
					<image class="no_list_img" src="/static/no_list.png" mode=""></image>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="center" background-color="#fff" border-radius="10px" @change="popup_change">
			<view class="popup_box">
				<view class="popup_box_top">温馨提示</view>
				<view class="popup_box_nr" v-if="popup_type == 1">
					预订成功30分钟内可免费取消：
					<span class="span">{{ cityStore.dayDate(xz_time).month_day }}14:00</span>
					前可免费取消，若未入住或过时取消将扣除100%房费。
				</view>
				<view class="popup_box_nr" v-if="popup_type == 2" style="text-align: center">是否确认退房？</view>
				<view class="popup_box_btn">
					<view class="popup_box_btn_nr btn1" @click="close">取消</view>
					<view class="popup_box_btn_nr btn2" @click="submit">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { useCityStore } from '@/utils/cityStore.js'
	const cityStore = useCityStore()
	const http = inject('$http')
	let list = ref([])
	let nav_id = ref(10)
	let show = ref(false)
	let popup = ref(null)
	let popup_type = ref(1)
	let xz_id = ref(0)
	let xz_index = ref(0)
	let xz_time = ref('')

	const pay = (id, index) => {
		console.log('id', id)
		xz_index.value = index
		http.post('/srapi/home/getWXPayInfo', { id: id }).then((res) => {
			console.log('返回值', res)
			let wdata = res.wdata
			pay_data(wdata,index)
		})
	}
	const pay_data = (wdata,index) => {
		uni.requestPayment({
			provider: 'wxpay',
			timeStamp: String(wdata.timeStamp),
			nonceStr: wdata.nonceStr,
			package: wdata.package,
			signType: wdata.signType,
			paySign: wdata.sign,
			success: function (res) {
				console.log('success:' + JSON.stringify(res))
				uni.showToast({
					title: '支付成功',
					icon: 'none',
					mask: true,
					duration: 800
				})
				setTimeout(() => {
					list.value[index].status = 0
				}, 800)
			},
			fail: function (err) {
				console.log('fail:' + JSON.stringify(err))
				uni.showToast({
					title: '支付失败请重试!',
					icon: 'none',
					mask: true,
					duration: 1000
				})
			}
		})
	}

	const submit = () => {
		if (popup_type.value == 1) {
			http.post('/srapi/wode/qxdingdan', { id: xz_id.value }).then((res) => {
				console.log('取消订单', res)
				uni.showToast({
					mask: true,
					title: res.msg,
					icon: 'none',
					duration: 500
				})
				list.value[xz_index.value].status = 4
				close()
			})
		} else {
			http.post('/srapi/wode/tfdingdan', { id: xz_id.value }).then((res) => {
				console.log('我要退房', res)
				uni.showToast({
					mask: true,
					title: res.msg,
					icon: 'none',
					duration: 500
				})
				list.value[xz_index.value].status = 3
				close()
			})
		}
	}

	const open = (type, index, id, time) => {
		popup.value.open()
		xz_id.value = id
		popup_type.value = type
		xz_index.value = index
		xz_time.value = time
	}
	const close = () => {
		popup.value.close()
	}
	const nav_click = (id) => {
		nav_id.value = id
		indexlist()
	}

	const del = (index, val) => {
		uni.showModal({
			title: '提示',
			content: '是否删除该订单记录?',
			success: function (res) {
				if (res.confirm) {
					http.post('/srapi/wode/scdingdan', { id: val }).then((res) => {
						console.log('用户点击确定', res)
						uni.showToast({
							mask: true,
							title: res.msg,
							icon: 'none',
							duration: 500
						})
						list.value.splice(index, 1)
					})
				}
			}
		})
	}
	const popup_change = (e) => {
		show.value = e.show
	}

	const indexlist = async () => {
		await http.post('/srapi/wode/dingdan', { status: nav_id.value }).then((res) => {
			console.log('返回值', res.data)
			list.value = res.data
		})
	}

	onShow(() => {
		console.log('页面刷新')
		indexlist()
	})

	onLoad((option) => {
		console.log('接收传参:', option)
		nav_id.value = option.type
	})

	let timer = null

	// 计算倒计时
	const calculateCountdown = (item) => {
		let expireTime = item.dqtime.replaceAll('-', '/')
		// console.log('expireTime', expireTime)
		const now = new Date().getTime()
		const end = new Date(expireTime).getTime()
		const timeLeft = end - now

		if (timeLeft <= 0) {
			item.status = 4
			return {
				days: 0,
				hours: 0,
				minutes: 0,
				seconds: 0,
				expired: true
			}
		}

		const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24))
		const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
		const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60))
		const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000)

		return {
			days,
			hours: hours < 10 ? `0${hours}` : hours,
			minutes: minutes < 10 ? `0${minutes}` : minutes,
			seconds: seconds < 10 ? `0${seconds}` : seconds,
			expired: false
		}
	}

	// 格式化倒计时显示
	const formatCountdown = (countdown) => {
		if (!countdown || countdown.expired) {
			return '已过期'
		} else {
			// return `${countdown.days}天 ${countdown.hours}:${countdown.minutes}:${countdown.seconds}`
			return `${countdown.days}天 ${countdown.hours}:${countdown.minutes}:${countdown.seconds}`
		}
	}
	// 格式化倒计时显示
	const formatCountdown_2 = (countdown) => {
		if (!countdown || countdown.expired) {
			return '已失效'
		} else {
			// return `${countdown.days}天 ${countdown.hours}:${countdown.minutes}:${countdown.seconds}`
			return ` ${countdown.hours}时${countdown.minutes}分${countdown.seconds}秒内未接单将失效`
		}
	}

	// 更新所有订单的倒计时
	const updateAllCountdowns = () => {
		list.value.forEach((order) => {
			order.beizhu = calculateCountdown(order)
		})
	}
	onMounted(() => {
		// 初始化倒计时
		updateAllCountdowns()

		// 设置定时器每秒更新
		timer = setInterval(() => {
			updateAllCountdowns()
		}, 1000)
	})

	onUnmounted(() => {
		// 清除定时器
		if (timer) {
			clearInterval(timer)
		}
	})

	const to_appraise = (id) => {
		uni.navigateTo({
			url: '/pages_A/appraise/appraise?id=' + id
		})
	}

	const to_order_detail = (id) => {
		uni.navigateTo({
			url: '/pages_A/order_detail/order_detail?id=' + id
		})
	}
</script>

<style lang="less" scoped>
	.top {
		position: sticky;
		left: 0;
		top: 0;
		z-index: 9;
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx;
		padding-bottom: 20rpx;
		background: linear-gradient(0deg, #d4ecfb 0%, #c1e7fc 30%);
		.top_box {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 10rpx;
			.top_box_left {
				position: relative;
				z-index: 2;
				width: 17rpx;
				height: 30rpx;
				padding: 15rpx 30rpx 15rpx 0;
			}

			.top_box_title {
				position: absolute;
				z-index: 1;
				width: 750rpx;
				left: -30rpx;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
			}
		}
		.nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx 40rpx 10rpx;
			z-index: 15;
			.nav_nr {
				font-size: 24rpx;
				font-weight: 500;
				color: #000000;
			}
			.nav_nr_xz {
				position: relative;
				display: block;
				z-index: 1;
			}
			.nav_nr_xz::after {
				content: '';
				position: absolute;
				left: -2rpx;
				bottom: 5rpx;
				z-index: -1;
				width: 90rpx;
				height: 8rpx;

				background: linear-gradient(to right, #2468fb, rgba(36, 104, 251, 0));
				border-radius: 4rpx;
			}
		}
	}
	.con {
		padding: 10rpx 30rpx 30rpx;
		background: linear-gradient(0deg, #f4f5f9 70%, #d4ecfb 100%);
	}

	.list {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.list_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.list_top_img {
				width: 140rpx;
				height: 140rpx;
				margin-right: 21rpx;
				border-radius: 25rpx;
			}
			.list_top_box {
				flex: 1;
				.list_top_box_title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.list_top_box_title_text {
						font-size: 28rpx;
						font-weight: 700;
						color: #000000;
					}
					.list_top_box_title_box {
						font-size: 24rpx;
						font-weight: 500;
						color: #787878;
						.list_top_box_title_box_img {
							width: 28rpx;
							height: 28rpx;
							margin-right: 10rpx;
						}
					}
				}
				.list_top_box_text {
					font-size: 28rpx;
					font-weight: 500;
					color: #787878;
					margin-top: 18rpx;
				}
			}
		}

		.list_box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.list_box_left {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				.list_box_left_text {
					font-size: 24rpx;
					font-weight: 700;
				}
				.list_box_left_num {
					font-size: 24rpx;
					font-weight: 500;
				}
			}
			.list_box_left_1 {
				color: #ff8400;
			}
			.list_box_left_2 {
				color: #12c89b;
			}
			.list_box_left_3 {
				color: #787878;
			}
			.list_box_right {
				.list_box_right_text {
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
				}
				.list_box_right_num {
					font-size: 32rpx;
					font-weight: 700;
					color: #e93424;
					margin-left: 10rpx;
				}
			}
		}
		.list_text {
			padding-top: 10rpx;
			font-size: 20rpx;
			font-weight: 500;
			color: #ff8400;
		}
		.list_btn {
			border-top: 1px solid #e4e5eb;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			padding-top: 15rpx;
			.list_btn_left {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-weight: 500;
				color: #787878;
				.list_btn_left_Img {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
			}
			.list_btn_right {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 172rpx;
				height: 62rpx;
				background: #ff8400;
				border-radius: 31rpx;
				font-size: 24rpx;
				font-weight: 700;
				color: #ffffff;
			}
			.list_btn_right_x {
				border: 1rpx solid #d9dbe3;

				background: #ffffff;
				color: #000000;
			}
		}
	}

	.popup_box {
		width: 520rpx;
		box-sizing: border-box;
		padding: 20rpx;
		.popup_box_top {
			padding: 10rpx;
			font-size: 28rpx;
			font-weight: 700;
			text-align: center;
			color: #000000;
		}
		.popup_box_nr {
			padding: 20rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #000000;
			line-height: 48rpx;
			.span {
				color: #2468fb;
			}
		}

		.popup_box_btn {
			padding: 20rpx 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.popup_box_btn_nr {
				width: 182rpx;
				height: 62rpx;
				border-radius: 32rpx;
				font-size: 28rpx;
				font-weight: 700;
				text-align: center;
				line-height: 64rpx;
			}
			.btn1 {
				background: #ffffff;
				border: 1rpx solid #b4b4b4;
				color: #787878;
			}
			.btn2 {
				background: #2468fb;
				border: 1rpx solid #2468fb;
				color: #ffffff;
			}
		}
	}
	//
</style>
